<script setup lang="ts">
import { Toast } from "vant";
import { ref } from "vue";
import { getConsultOrderPayUrl } from "@/services/consult";

const { orderId, show, payCallback } = defineProps<{
  orderId: string; // 订单ID
  actualPayment: number; // 支付金额
  onClose?: () => void; // 关闭后回调
  show: boolean; // 控制支付抽屉显隐
  payCallback?: string;
}>();
const emit = defineEmits<{
  (e: "update:show", val: boolean): void;
}>();

const paymentMethod = ref<0 | 1>();

// 跳转支付
const pay = async () => {
  if (paymentMethod.value === undefined) return Toast("请选择支付方式");
  Toast.loading("跳转支付");
  const res = await getConsultOrderPayUrl({
    orderId: orderId,
    paymentMethod: paymentMethod.value,
    payCallback: payCallback || "http://127.0.0.1:5173/room",
  });
  window.location.href = res.data.payUrl;
};
</script>

<template>
  <!-- 支付方式弹窗 -->
  <van-action-sheet
    :show="show"
    @update:show="emit('update:show', $event)"
    title="选择支付方式"
    :close-on-popstate="false"
    :before-close="onClose"
    :closeable="false"
  >
    <div class="pay-type">
      <p class="amount">￥{{ actualPayment.toFixed(2) }}</p>
      <van-cell-group>
        <van-cell title="微信支付" @click="paymentMethod = 0">
          <template #icon><cp-icon name="consult-wechat" /></template>
          <template #extra
            ><van-checkbox :checked="paymentMethod === 0"
          /></template>
        </van-cell>
        <van-cell title="支付宝支付" @click="paymentMethod = 1">
          <template #icon><cp-icon name="consult-alipay" /></template>
          <template #extra
            ><van-checkbox :checked="paymentMethod === 1"
          /></template>
        </van-cell>
      </van-cell-group>
      <div class="btn">
        <van-button @click="pay" type="primary" round block
          >立即支付</van-button
        >
      </div>
    </div>
  </van-action-sheet>
</template>

<style lang="scss" scoped>
.pay-type {
  .amount {
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .btn {
    padding: 15px;
  }
  .van-cell {
    align-items: center;
    .cp-icon {
      margin-right: 10px;
      font-size: 18px;
    }
    .van-checkbox :deep(.van-checkbox__icon) {
      font-size: 16px;
    }
  }
}
</style>
